<template>
    <div class="goodsList_container">
        <div class="goods_list">
            <div class="mui-card" v-for="(item,index) in goodsList" :key="item.id">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<mt-switch @change="selectChange(item.id,$store.getters.getSelect[item.id])" v-model="$store.getters.getSelect[item.id]"></mt-switch>
                        <img :src="item.thumb_path" alt="">
                        <div>
                            <h3 class="title">{{item.title}}</h3>
                            <p>
                                <span>￥{{item.sell_price}}</span>
                                <ShopNumbox :initCount="$store.getters.getShopCarCount[item.id]" :goodsId="item.id"></ShopNumbox>
                                <a href="#" @click.prevent="remove(item.id,index)">删除</a>
                            </p>
                        </div>
					</div>
				</div>
			</div>
           <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<div class="left">
                            <p>总计(不含运费)</p>
                            <p>已勾选商品<span class="number">{{$store.getters.getAllAmount.allCount}}</span>件.总价&nbsp;<span class="price">￥{{$store.getters.getAllAmount.allPrice}}</span>元</p>
                        </div>
                        <mt-button type="danger">去结算</mt-button>
					</div>
				</div>
		   </div>
        </div>
    </div>
</template>
<script>
import ShopNumbox from "../subcomponents/ShopCar_numbox.vue";
export default {
    data(){
      return{
        goodsList:[],
      }
    },
    created(){
       this.getGoodsList();
    },
    methods:{
        getGoodsList(){
            var idArr = [];
            this.$store.state.car.forEach(item=>idArr.push(item.id));
            this.$http.get("api/goods/getshopcarlist/"+idArr.join(",")).then((result)=>{
                if(result.body.status===0){
                    this.goodsList = result.body.message;
                }else{
                    alert("请求失败")
                }
            });
        },
        remove(id,index){
            this.goodsList.splice(index,1);
            this.$store.commit("removeCar",id)
        },
        selectChange(id,val){
            this.$store.commit("updateSelect",{id,select:val})
        }
    },
    components:{
        ShopNumbox
    }
}
</script>
<style>
   .goodsList_container{
       background-color:#eee;
       overflow: hidden;
   }
   .mui-card-content-inner{
       display:flex;
       align-items: center;
       justify-content: space-between
   }
   .mui-card-content-inner img{
       width:80px;
       height:80px;
   }
   .mui-card-content-inner div p span{
       color:red;
       font-weight:bold;

   }
   .mui-card-content-inner div h3{
       font-size:14px;
       padding-bottom:8px;
       line-height:14px;
   }
</style>

